<template>
	<view class="content">
		<image src="../../static/background.png" />
		<u-navbar :is-back="false" :title="title" :background="background" :title-color="titleColor"></u-navbar>
		<view class="logo">
			<u-image width="260rpx" height="250rpx" src="/static/logo.png" shape="circle"></u-image>
		</view>
		<view class="title">
			<view>广软校园二手交易平台</view>
		</view>
		<view class="form-container">
			<u-form :model="loginForm" ref="loginForm">
				<u-form-item label="账号" prop="username" :border-bottom="false">
					<u-input v-model="loginForm.username" :border="true" placeholder="请输入账号" border-color="black"
						placeholder-style="color:#808080" />
				</u-form-item>
				<u-form-item label="密码" prop="password" :border-bottom="false">
					<u-input v-model="loginForm.password" type="password" :border="true" :password-icon="true"
						placeholder="请输入密码" border-color="black" placeholder-style="color:#808080" />
				</u-form-item>
			</u-form>
			<view class="button-container">
				<u-button :custom-style="customStyle" :ripple="true" shape="square" type="success" @click="handleLogin">
					登录</u-button>
				<u-button :custom-style="customStyle" :ripple="true" shape="square" @click="handleRegister">注册</u-button>
			</view>
		</view>
	</view>
</template>

<script>
	import Vue from 'vue'
	export default {
		data() {
			return {
				title: "登录",
				titleColor: "#330867",
				background: {
					// 渐变色
					backgroundImage: 'linear-gradient(to right, #f78ca0 0%, #f9748f 19%, #fd868c 60%, #fe9a8b 100%)'
				},
				loginForm: {
					username: "",
					password: ""
				},
				customStyle: {
					marginTop: '20px', // 注意驼峰命名，并且值必须用引号包括，因为这是对象
					width: "250rpx"
				},
				rules: {
					username: [{
						required: true,
						message: '请输入您的账号',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur'
					}],
					password: [{
						required: true,
						message: '请输入您的密码',
						// 可以单个或者同时写两个触发验证方式 
						trigger: 'blur'
					}]
				}
			}
		},
		methods: {
			handleLogin() {
				this.$refs.loginForm.validate(valid => {
					if (valid) {
						console.log('验证通过');
						// 调用API集中管理中的login
						Vue.prototype.$u.api.login({
							username: this.loginForm.username,
							password: this.loginForm.password
						}).then(res => {
							if (res.code == "200") {
								// 状态码为200时设置token到Vuex中
								uni.setStorageSync('token', res.token);
								// 更新Vuex中的数据
								this.$store.commit('setNeedAuth',false);
								this.$store.commit('setIsLogin',true);
								// 跳转到首页
								uni.switchTab({
								    url: '/pages/index/index'
								});
							} else {
								Vue.prototype.$u.toast(res.msg)
							}
						})
					} else {
						console.log('验证失败');
					}
				});
			},
			handleRegister() {
				uni.navigateTo({
					url:'/pages/register/register'
				})
			}
		},
		onReady() {
			this.$refs.loginForm.setRules(this.rules);
			uni.clearStorage();
		}
	}
</script>

<style scoped>
	/* page {
		height: 100%;
		width: 100%;
		background-image: url('../../static/background.png');
		background-repeat: repeat-x;
		background-size: 100% 100%;
	} */

	.content {
		height: 100%;
	}

	image {
		position: absolute;
		left: 0;
		bottom: 0;
		display: block;
		width: 100%;
		height: 100%;
		z-index: -999;
	}

	.logo {
		display: flex;
		justify-content: center;
		margin-top: 80rpx;
	}

	.title {
		display: flex;
		justify-content: center;
	}

	.title view {
		font-size: 32rpx;
		font-weight: bold;
		padding: 20rpx;
	}

	.form-container {
		padding: 60rpx;
		color: black;
		font-weight: bold;
	}

	.button-container {
		display: flex;
		flex-direction: row;
		justify-content: space-around;
	}
</style>
